<template>
	<view class="tabbar" @touchmove.stop.prevent="() => {}">
		<view class="content safe-area-inset-bottom" :style="{height: $u.addUnit(vuex_tabbar_height, 'px')}">
			<view class="item" v-for="(item, index) in list" @tap.stop="clickHandler(index)" :key="index">
				<image class="icon"
					:class="{iconM: item.midButton, iconMagnify: (!item.midButton && currentTabbar === index)}"
					mode="aspectFit" :src="currentTabbar === index ? item.selectedIconPath : item.iconPath">
				</image>
			</view>
			<view class="left-filleted-corner"></view>
			<view class="right-filleted-corner"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cuTabbar",
		data() {
			return {
				list: [{
						pagePath: "/pages/home/home",
						iconPath: "../../static/images/tabbar/home.png",
						selectedIconPath: "../../static/images/tabbar/home-selected.png",
					},
					{
						pagePath: "/pages/media/media",
						iconPath: "../../static/images/tabbar/media.png",
						selectedIconPath: "../../static/images/shortVideo/round_add.png",
						midButton: true,
					},
					{
						pagePath: "/pages/user/user",
						iconPath: "../../static/images/tabbar/user.png",
						selectedIconPath: "../../static/images/tabbar/user-selected.png",
					},
				],
			}
		},
		created() {
			uni.hideTabBar();
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
			
			for (let index in this.list) {
				const route = this.list[index];
				if (route.pagePath.includes(curRoute)) {
					this.$u.vuex("vuex_current_tabbar", index);
					break;
				}
			}
		},
		computed: {
			currentTabbar() {
				return parseInt(this.vuex_current_tabbar);
			}
		},
		methods: {
			clickHandler(index) {
				if (index === this.currentTabbar) {
					if (index == 1)
						uni.navigateTo({
							url: "/pages/media/uploadMedia"
						})
				} else
				console.log(111)
					uni.switchTab({
						url: this.list[index].pagePath,
						success: () => {
							this.$u.vuex('vuex_current_tabbar', index);
						},
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "uview-ui/libs/css/style.components.scss";
	$filleted-corner-width: 48rpx;
	$theme-color: #1b1c28;

	.u-fixed-placeholder {
		/* #ifndef APP-NVUE */
		box-sizing: content-box;
		/* #endif */
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		
		.content {
			@include vue-flex();
			justify-content: space-around;
			align-items: center;			
			z-index: 10000;
			background-color: $theme-color;
			/* #ifndef APP-NVUE */
			box-sizing: content-box;

			/* #endif */
			.left-filleted-corner {
				position: absolute;
				top: -$filleted-corner-width + 1;
				left: 0;
				width: $filleted-corner-width;
				height: $filleted-corner-width;
				background-color: transparent;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					bottom: -$filleted-corner-width;
					left: -$filleted-corner-width;
					width: $filleted-corner-width * 2;
					height: $filleted-corner-width * 2;
					background-color: transparent;
					border-radius: 50%;
					border: $filleted-corner-width solid $theme-color;
				}
			}

			.right-filleted-corner {
				position: absolute;
				top: -$filleted-corner-width + 1;
				right: 0;
				width: $filleted-corner-width;
				height: $filleted-corner-width;
				background-color: transparent;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					bottom: -$filleted-corner-width;
					right: -$filleted-corner-width;
					width: $filleted-corner-width * 2;
					height: $filleted-corner-width * 2;
					background-color: transparent;
					border-radius: 50%;
					border: $filleted-corner-width solid $theme-color;
				}
			}

			.item {
				flex: 1;
				@include vue-flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				padding: 0;
				flex-direction: column;
				position: relative;

				.icon {
					height: 52rpx;
					width: 52rpx;
				}

				.iconMagnify {
					height: 72rpx;
					width: 72px;
				}

				.iconM {
					height: 100rpx;
					width: 100rpx;
				}
			}
		}
	}
</style>